<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #title {
            line-height: 40px;
        }

        .list li {
            line-height: 32px;
            border: 1px dashed #333;
        }

        .list li+li {
            border-top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="title">dom操作封装</h3>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>
<script>
    // dom操作
    // 简单的来说 对文档(html页面)上的元素进行增删改查 还有获取元素,修改元素的内容, 属性, 样式 ,绑定事件


    // DOM操作封装 => 按功能封装

    // 面向过程
    // 获取元素 
    var list = document.querySelectorAll(".list li"); // [li,li,li,li,li,li]

    // 操作元素的集合改变文本内容
    // function setText(con) {
    //     for (var i = 0; i < list.length; i++) {
    //         var ele = list[i];
    //         ele.textContent = con;
    //     }
    // }


    // 操作元素的集合获取文本内容(默认获取集合中的第一个)
    // function getText() {
    //     // 获取集合中的每一个
    //     // var arr = [];
    //     // for (var i = 0; i < list.length; i++) {
    //     //     var ele = list[i];
    //     //     arr.push(ele.textContent);
    //     // }
    //     // return arr;

    //     // 如果集合中有多个, 默认获取集合中的第一个!!!
    //     return list[0].textContent;
    // }

    // setText(33333);

    // var res = getText();
    // console.log(res);



    // 面向对象  
    var getEle = {
        list: document.querySelectorAll(".list li"),
        getText: function () {
            // this -> getEle
            return this.list[0].textContent;
        },
        setText: function (con) {
            // this -> getEle
            for (var i = 0; i < this.list.length; i++) {
                var ele = this.list[i];
                ele.textContent = con;
            }
        }
    }

    getEle.setText(33333);


    var getEle1 = {
        list: document.querySelectorAll("#title"),
        getText: function () {
            // this -> getEle
            return this.list[0].textContent;
        },
        setText: function (con) {
            // this -> getEle
            for (var i = 0; i < this.list.length; i++) {
                var ele = this.list[i];
                ele.textContent = con;
            }
        }
    }

    getEle1.setText(44444)







</script>

</html>